<!-- 开始排考-考试数据统计 -->
<template>
  <div class="wrapper-container" style="width:100%">
    <div class="search-container" style="margin:0">
      <div class="search-container-item" style="margin-right:15px">
        <span class="spanItem">级次：
        </span>
        <el-select
          v-model="Grade" 
          size="mini"
          placeholder="请选择级次"
          style="width:160px"
          clearable
        >
          <el-option
            v-for="(item,index) in njList"
            :key="index"
            :label="item.xqszxn"
            :value="item.xqszxn"
          >
          </el-option>
        </el-select>
      </div>
      <div class="search-container-item">
        <span class="spanItem">专业班次：
        </span>
        <el-select
          v-model="SpecialityClassName" size="mini"
          placeholder="请选择专业班次"
          style="width:160px"
          clearable
        >
          <el-option
            v-for="(item) in specialtyList"
            :key="item.id"
            :label="item.className"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <div class="search-button" @click="chax" style="margin: 3px 15px 0 15px;">
        <img src="../../../assets/assessment/icon-search.png" alt="" />
        <span>查询</span>
      </div>
    </div>
    <div class="table-container">
      <el-table
        :data="tableData"
        max-height="700"
        style="width: 100%"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class"
      >
        <el-table-column
          v-for="(item, index) in dateList"
          :key="index"
          :label="item" 
          align="center"
          :prop="item"
        >
        <template slot-scope="scope">
          <span>{{ tableData[tableData.length - 1][index] }}</span>
        </template>
        </el-table-column>
        <!-- <el-table-column prop="crade" label="级次" align="center">
        </el-table-column>
        <el-table-column prop="clasename" label="专业班次" align="center">
        </el-table-column> -->
        <!-- <el-table-column
          v-for="date in dateList"
          :key="date"
          :prop="date"
          :label="date"
          align="center"
        >
        </el-table-column> -->
        <!-- <el-table-column prop="exanumber" label="总门数" align="center">
        </el-table-column>
        <el-table-column
          prop="finaltestdate"
          label="最终考试时间"
          align="center"
        >
        </el-table-column> -->
      </el-table>
      <div class="search-result-pagin-panel" style="text-align:right;padding:0">
        <el-pagination
          style="marign-top:15px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="cuurrentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import SelectItem from "../../../components/SelectItem.vue";
import InputItem from "../../../components/InputItem.vue";
import ButtonItem from "../../../components/ButtonItem.vue";
import { reqCheckYearList,reqZybcList } from "@/api/admin1/check";
import { ksdatacount } from "@/api/courseAchievement/entryResults";

export default {
  components: {
    SelectItem,
    InputItem,
    ButtonItem,
  },
  data() {
    return {
      current:1,
      size:10,
      Grade:'',
      njList:[],
      SpecialityClassName:'',
      specialtyList:[],
      dateList: [],
      tableData: [],
    };
  },
  mounted(){
    this.gradeAll();
    this.getlist();
    this.getData();
  },
  methods: {
    //查询
    chax(){
      this.getData()
    },
    //获取年级
    gradeAll(){
      let that = this;
      reqCheckYearList().then(res => {
        if(res.data.code == 200 && res.data.data){
          that.njList = res.data.data;
        }
      });
    },
    //获取专业班次
    async getlist(){
      const result = await reqZybcList();
      result.data.code == 200 ? this.specialtyList = result.data.data : [];
    },
    getData(){
      let obj = {
        Grade:this.Grade,
        SpecialityClassName:this.SpecialityClassName
      }
      ksdatacount(obj).then(res=>{
        if(res.data.code == 200){
          this.dateList = res.data.data.title;
          this.tableData = res.data.data.data;
        }
      })
    },
    clickExcel() {
      alert();
    },
  },
};
</script>
<style lang="less" scoped>
.spanItem {
    color: #004ca7;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
}

@fontFamily:"Microsoft YaHei";
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  margin: 15px 0;
  > ::v-deep div.el-table__header-wrapper {
    > table.el-table__header {
      > thead {
        > tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          > th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  > ::v-deep div.el-table__body-wrapper {
    > table.el-table__body {
      > tbody {
        > tr.xpaas-row-class {
          > td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          > td.xpaas-cell-class {
            height: 76px;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            > div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
.search-container {
  justify-content: flex-start !important;
}

.search-button {
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 27px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;

  > span {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51aef6;
  }

  > img {
    width: 19px;
    height: 19px;
    margin-right: 4px;
  }
}

.table-container {
  margin-top: 15px;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    > div {
      margin-bottom: 8px;
    }
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/special.less";

.wrapper-container {
  width: 1711px;
  margin: 0 auto;
}
.table-container {
  margin-top: 15px;

  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.save-button {
  width: 87px;
  height: 36px;
  line-height: 36px;
  background: #fff6ef;
  border: 1px solid #f3b815;
  border-radius: 6px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #f3b815;
  text-align: center;
  margin: 82px auto;
}

.zuoyou {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
